import echarts from 'echarts'

function getPersonOption() {
    return {
    // grid: {
    //   left: '3%',
    //   containLabel: true
    // },
    // series: [
    //   {
    //     center: ['50%', '60%'],
    //     radius: ['40%', '70%'],
    //     label: {
    //       normal: {
    //         show: false,
    //         formatter: '{d}%\n{b}',
    //         position: 'center'
    //       }
    //     }
    //   }
    // ],
        color: ['#19C188', '#3F77FF', '#EC9E36'],
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 20,
        //     fontWeight: 400
        //   }
        // },
        // label: {
        //   show: false,
        //   formatter: '{d}%\n{b}',
        //   position: 'center'
        // },
        legend(v) {
            v.data = v.data.map(da => ({
                name: da,
            }))
            const obj = {
                formatter(name) {
                    const names = name
                    // const arr = ['{a|' + names[0] + '}', '{b|' + names[1] + '}'];
                    return names
                },
                orient: 'horizontal',
                // right: 140,
                itemGap: 30,
                top: '5%',
                color: '#fff',
                itemWidth: 24,
                itemHeight: 20,
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                },
            }
            v.top = '5%'
            v.orient = 'horizontal'
            Object.assign(v, obj)
            return v
        },
        'series.0.center': ['50%', '60%'],
        'series.0.radius': ['40%', '70%'],
        'series.0.label': false,
    }
}

function getSensorOption() {
    return {
        legend(v) {
            v.data = v.data.map(da => ({
                name: da,
                icon: 'circle',
            }))
            const obj = {
                orient: 'vertical',
                top: 20,
                right: 10,
                y: 'center',
                itemWidth: 10,
                textStyle: {
                    color: '#6289BF',
                },
            }
            Object.assign(v, obj)
            return v
        },
        'series.0.center': ['25%', '50%'],
        'series.0.radius': '70%',
        'series.0.label': false,
    }
}

function getEnergyOption(color1, color2, yAxisName) {
    return {
        series(v) {
            v.forEach((i, n) => {
                // 处理颜色的透明度
                const color = n === 0 ? [color1, color1.replace('1)', '0.2)')] : ['#00FFFF', color2.replace('1)', '0.2)')]
                i.areaStyle = {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: color[0],
                        },
                        {
                            offset: 1,
                            color: color[1],
                        },
                        ]),
                    },
                }
                i.itemStyle = {
                    color: n === 0 ? color1 : color2,
                }

                i.smooth = true // 设置连线是否平滑
                i.symbol = 'circle' // 连线的图为园
                i.symbolSize = '5'
            })
            return v
        },
        legend: {
            itemHeight: 7,
            textStyle: {
                color: '#6289BF',
            },
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true,
        },
        yAxis: {
            position: 'left',
            type: 'value',
            name: 'dB',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
                formatter: '{value} ml',
            },
            nameTextStyle: { color: '#fff' }, // y轴名称的样式
            splitLine: {
                lineStyle: {
                    type: 'dashed', // y轴分割线类型
                },
            },
        },
        xAxis: {
            boundaryGap: ['0.1', '0.1'],
            axisLabel: {
                textStyle: {
                    color: '#6289BF',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#6289BF',
                },
            },
        },
    }
}

function getEnergyOption2(color1, color2, yAxisName) {
    return {
        series(v) {
            v.forEach((i, n) => {
                // 处理颜色的透明度
                // const color =
                //   n === 0 ? [color1, color1.replace('1)', '0.2)')] : ['#00FFFF', color2.replace('1)', '0.2)')];
                // i.areaStyle = {
                //   normal: {
                //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //       offset: 0,
                //       color: color[0]
                //     },
                //     {
                //       offset: 1,
                //       color: color[1]
                //     }
                //     ])
                //   }
                // };
                i.itemStyle = {
                    color: n === 0 ? color1 : color2,
                }
                i.yAxisIndex = n === 0 ? 0 : 1
                i.smooth = false // 设置连线是否平滑
                i.symbol = 'circle' // 连线的图为园
                i.symbolSize = '5'
            })
            return v
        },
        legend: {
            itemHeight: 7,
            textStyle: {
                color: '#6289BF',
            },
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true,
        },
        yAxis(itms) {
            itms[0] = {
                position: 'left',
                type: 'value',
                name: 'ms',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },

                },
                nameTextStyle: { color: '#fff' }, // y轴名称的样式
                splitLine: {
                    lineStyle: {
                        type: 'dashed', // y轴分割线类型
                    },
                },
            }
            itms[1] = {
                position: 'right',
                type: 'value',
                name: '丢包率',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: '{value} %',
                },
                nameTextStyle: { color: '#fff' }, // y轴名称的样式
                splitLine: {
                    lineStyle: {
                        type: 'dashed', // y轴分割线类型
                    },
                },
            }
            return itms
        },
        xAxis: {
            boundaryGap: ['0.1', '0.1'],
            axisLabel: {
                textStyle: {
                    color: '#6289BF',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#6289BF',
                },
            },
        },
    }
}

function getWorkOption(yAxisName = '/条') {
    return {
        series(v) {
            v.forEach((i, n) => {
                i.barWidth = 20
                const color = n === 0 ? ['#0063F8', '#84E6FF'] : ['#C65A12', '#DCB52F']
                i.itemStyle = {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: color[0],
                        },
                        {
                            offset: 1,
                            color: color[1],
                        },
                        ]),
                    },
                }
            })
            return v
        },
        legend: {
            textStyle: {
                color: '#6289BF',
            },
        },
        grid: {
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true,
        },
        yAxis: {
            position: 'left',
            type: 'value',
            name: yAxisName,
            nameTextStyle: {
                color: '#6289BF',
            },
            axisLabel: {
                textStyle: {
                    color: '#6289BF',
                },
            },
            splitLine: {
                show: false, // 不展示分割线
            },
            axisLine: {
                show: true, // 展示y轴线
                lineStyle: {
                    color: '#6289BF',
                },
            },
        },
        xAxis: {
            axisLabel: {
                rotate: 40,
                textStyle: {
                    color: '#6289BF',
                    fontSize: 12,
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#6289BF',
                },
            },
        },
    }
}
export {
    getEnergyOption, // 能耗数据的option
    getEnergyOption2, // ping
    getWorkOption, // 工单数据的option
    getPersonOption, // 人员数据的option
    getSensorOption, // 设施设备指标的option
}
